<template>
  <div class="VHomeIndex">
    <div class="head-nav">
      <van-tabs color="red">
        <van-tab title="昨日数据" name="a">
          <div class="todayData">
            <div>1 订单</div>
            <div>￥0 营业额</div>
          </div>
        </van-tab>
        <van-tab title="今日数据" name="b">
          <div class="todayData">
            <div>0订单</div>
            <div>￥0 营业额</div>
          </div>
        </van-tab>
        <van-tab title="本周数据" name="c">
          <div class="todayData">
            <div>2订单</div>
            <div>￥199 营业额</div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <div class="shop">
      <div class="shopList">
        <div class="shop-item">
          <div class="shop">
            <van-tag type="success" style="float: right">上架中</van-tag>
            <img src="../../assets/imgs/shop2.jpg" class="shop-img" alt="" />
            <div class="shop-detail">
              <p class="shop-name">雪山神牛</p>
              <p class="shop-weight">950g | +50g</p>
              <p class="shop-explain">
                <van-tag color="#b2b2b2" text-color="#b2b2b2" plain=""
                  >生产日期:2024-01-25</van-tag
                >
              </p>

              <div class="deposits">
                <van-tag type="warning"> 销量:4 </van-tag>
                <p class="inventory">
                  <van-tag type="primary">库存:96</van-tag>
                </p>
              </div>
              <div class="shop-price"><span></span><span>￥3.99</span></div>
            </div>
          </div>
        </div>

        <div class="shop-item">
          <div class="shop">
            <van-tag type="success" style="float: right">上架中</van-tag>
            <img src="../../assets/imgs/shop2.jpg" class="shop-img" alt="" />
            <div class="shop-detail">
              <p class="shop-name">雪山神牛</p>
              <p class="shop-weight">950g | +50g</p>
              <p class="shop-explain">
                <van-tag color="#b2b2b2" text-color="#b2b2b2" plain=""
                  >生产日期:2024-01-25</van-tag
                >
              </p>

              <div class="deposits">
                <van-tag type="warning"> 销量:4 </van-tag>
                <p class="inventory">
                  <van-tag type="primary">库存:96</van-tag>
                </p>
              </div>
              <div class="shop-price"><span></span><span>￥3.99</span></div>
            </div>
          </div>
        </div>
      </div>

      <div class="shopList">
        <div class="shop-item">
          <div class="shop">
            <van-tag type="success" style="float: right">上架中</van-tag>
            <img src="../../assets/imgs/shop2.jpg" class="shop-img" alt="" />
            <div class="shop-detail">
              <p class="shop-name">雪山神牛</p>
              <p class="shop-weight">950g | +50g</p>
              <p class="shop-explain">
                <van-tag color="#b2b2b2" text-color="#b2b2b2" plain=""
                  >生产日期:2024-01-25</van-tag
                >
              </p>

              <div class="deposits">
                <van-tag type="warning"> 销量:4 </van-tag>
                <p class="inventory">
                  <van-tag type="primary">库存:96</van-tag>
                </p>
              </div>
              <div class="shop-price"><span></span><span>￥3.99</span></div>
            </div>
          </div>
        </div>

        <div class="shop-item">
          <div class="shop">
            <van-tag type="success" style="float: right">上架中</van-tag>
            <img src="../../assets/imgs/shop2.jpg" class="shop-img" alt="" />
            <div class="shop-detail">
              <p class="shop-name">雪山神牛</p>
              <p class="shop-weight">950g | +50g</p>
              <p class="shop-explain">
                <van-tag color="#b2b2b2" text-color="#b2b2b2" plain=""
                  >生产日期:2024-01-25</van-tag
                >
              </p>

              <div class="deposits">
                <van-tag type="warning"> 销量:4 </van-tag>
                <p class="inventory">
                  <van-tag type="primary">库存:96</van-tag>
                </p>
              </div>
              <div class="shop-price"><span></span><span>￥3.99</span></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { CheckLogin } from "@/api/login";
import { reactive, watchEffect } from "vue";

const data = reactive({
  name: "这是真正的主页面",
});
watchEffect(()=>{
  CheckLogin()
})
</script>

<style scoped>
.VHomeIndex {
  padding: 5px;
}
.nav-tabs {
  color: rgb(15, 15, 16);
}

.adm-tabs-tab-active {
  color: var(--adm-color-text) !important;
}

.adm-tabs {
  --active-line-color: var(--adm-color-danger) !important;
  --fixed-active-line-width: 45px;
  --active-line-height: 4px;
  --active-line-border-radius: 10px;
}

.head-nav {
  height: 136px;
  border: 1px solid #eee;
  margin: 2px;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}

.todayData {
  /* box-sizing: border-box; */
  padding: 5px;
  margin-top: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 74px;
  /* border: 1px solid #000; */
  border-radius: 5px;
}

.todayData > div {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  color: #fff;
}

.todayData > :nth-child(1) {
  height: 100%;
  background: #529b2e;
  border-radius: 5px 0px 0px 5px;
}

.todayData > :nth-child(2) {
  height: 100%;
  background: #e6a23c;
  border-radius: 0px 5px 5px 0px;
}

.shopList {
  /* position: relative; */
  margin-top: 5px;
  justify-content: space-between;
  display: flex;
  /* background: rgb(244, 244, 244); */
}

.shop-item {
  width: 49%;
  background: #fff;
  /* border-radius: 20px; */
  /* border: 1px solid #000; */
}

.shop-item > .shop > .shop-img {
  border-radius: 5px 5px 0px 0px;
  width: 100%;
  /* height: 100px; */
  height: 150px;
  padding-bottom: 5px;
  border-bottom: 1px solid #eee;
}

.shop-item > .shop p {
  margin: 3px;
}

.shop-item > .shop .shop-name {
  font-size: 14px;
  font-weight: bold;
}

.shop-item > .shop .shop-explain {
  color: #c2bcbc;
  font-size: 12px;
}

.shop-weight {
  color: #b2b2b2;
  font-size: 10px;
}

.shop-detail {
  padding: 0px 3px 0px 3px;
  position: relative;
}

.shop-price {
  margin-top: 5px;
  margin-bottom: 5px;
  padding-bottom: 8px;
  color: red;
}

.shop-price :nth-child(1) {
  font-size: 10px;
}

.shop-price :nth-child(2) {
  font-size: 14px;
  font-weight: bold;
}

.shop-btn {
  position: absolute;
  bottom: 6px;
  right: 3px;
}

/* .icon-gou{
   border: 1px solid #000;
   
  } */

.iconsize {
  font-size: 24px !important;
  color: red;
}

.shopNum {
  font-size: 18px;
  padding: 0px 3px 0px 3px;
  position: relative;
  bottom: 3px;
}

.shop {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  border-radius: 5px;
}

.deposits {
  margin-top: 5px;
  margin-left: 3px;
}

.inventory {
  color: #c2bcbc;
  float: right;
  position: relative;
  bottom: 2px;
}

.shop-status {
  display: flex;
  justify-content: space-between;
  padding-bottom: 2px;
  border-bottom: 1px solid #eee;
  padding: 0px 5px 5px 5px;
}

.shop-status > div {
  margin-top: 10px;
}
</style>